<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet"href="no-exist.css"> -->
    <title>前端监控</title>
  </head>

  <body>
    <div id="container">
      <div class="content">
        <input
          id="JSErrorBtn"
          type="button"
          value="点击抛出JS错误"
          onclick="JSErrorHandler()"
        />
        <input
          id="promiseErrorBtn"
          type="button"
          value="点击抛出Promise错误"
          onclick="promiseErrorHandler()"
        />
        <input
          id="requestSuccessBtn"
          type="button"
          value="ajax 成功请求"
          onclick="sendSuccess()"
        />
        <input
          id="requestErrorBtn"
          type="button"
          value="ajax 失败请求"
          onclick="sendError()"
        />
        <img src="no-exist.jpg" />
        <!-- <div class="conten1t" style="width: 600px;word-wrap: break-word;"></div> -->
      </div>
    </div>
    <script>
      function JSErrorHandler() {
        window.undefinedVal.error = "js-error";
      }
      function promiseErrorHandler() {
        new Promise(function (resolve, reject) {
          window.undefinedVal.error = "promise-error";
        });
      }
      function sendSuccess() {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "/success", true);
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send();
      }
      function sendError() {
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "/error", true);
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.onerror = function (error) {
          console.log(error);
        };
        xhr.send("message=请求失败");
      }
      let content = document.getElementsByClassName("conten1t")[0];
      content.innerHTML = "@".repeat(10000);

      // DOM 解析完成，即使依赖的资源没有加载完成，也会触发这个事件
      document.addEventListener("DOMContentLoaded", () => {
        let start = Date.now();
        while (Date.now() - start < 1000) {}
      });

      setTimeout(() => {
        let content = document.getElementsByClassName("content")[0];
        let h1 = document.createElement("h1");
        h1.innerHTML = "我是页面中最有意义的内容";
        h1.setAttribute("elementtiming", "meaningful");
        content.appendChild(h1);
      }, 2000);
    </script>
    <!-- <script src="no-exist.js"></script> -->
  </body>
</html>
